<template>
  <blog-body>
    <template v-slot:header>
      <blog-navigation-bar>
        <view style="color: #fff;display: flex;align-items: center;gap: 3px;">
          首页（ViewPage + 滑动）
        </view>
        <template v-slot:attach>
          <blog-view-tabs :current="current" @update:current="val=>current=val" :tabs="tabs"/>
        </template>
      </blog-navigation-bar>
    </template>
    <template>
      <blog-view-page slide :tabs="tabs" :current="current" @update:current="val=>current=val">
        <template #page="{index}">
          <view style="height: 100%;">
            <PageOne v-if="index===0"/>
            <PageTwo v-else/>
          </view>
        </template>
      </blog-view-page>
    </template>
  </blog-body>
</template>

<script>
import PageOne from "@/pages/index/page/pageOne.vue";
import PageTwo from "@/pages/index/page/pageTwo.vue";

export default {
  components: {PageTwo, PageOne},
  data() {
    return {
      tabs: [{name: "页面1"}, {name: "页面2"}],
      current: 0
    }
  },
  methods: {}
}
</script>

<style>

.content {
  height: 100%;
  font-size: 16px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
